<template>
	<view class="container">
		<view class="navbar">
			<view class="center">工具箱</view>
		</view>
		<view class="header">
			<view class="title">工具箱</view>
			<view class="desc">精选好用的工具</view>
			<view class="desc">客服/合作微信号：{{ site.wxkf }}</view>
		</view>
		<view class="list-bar">
			<view class="item" v-for="item in toolsList" :key="item.id" @click="ToMiniProgram(item)">
				<view class="item-left">
					<view class="icon">
						<image :src="'https://yc.aiaud.cn' + item.image" mode="aspectFit" />
					</view>
					<view>
						<view class="name">{{ item.title }}</view>
						<view class="desc">{{ item.jieshao }}</view>
					</view>
				</view>
				<view class="item-right">
					<van-icon name="arrow" size="24" color="gray" />
				</view>
			</view>
		</view>
		<tabbarVue :selectedTabbar="3"></tabbarVue>
	</view>
</template>

<script>
import tabbarVue from '../../components/tabbar.vue';
export default {
	data() {
		return {
			toolsList: null,
			site: null
		};
	},
	onShow() {
		this.getdata();
	},
	components: {
		tabbarVue
	},
	methods: {
		getdata() {
			let that = this;
			let data = {};
			data.ac = 'getlink';
			data.miniapp_id = 1;
			uni.request({
				url: 'https://yc.aiaud.cn/api/',
				data,
				header: {
					'Content-Type': 'application/x-www-form-urlencoded'
				},
				method: 'POST',
				success: function (res) {
					// that.setData({
					//   toolsList: res.data.data.linklist,
					//   site: res.data.data.site,
					// })
					console.log(res);
					that.toolsList = res.data.data.linklist;
					that.site = res.data.data.site;
				}
			});
		},
		ToMiniProgram(item) {
			uni.navigateToMiniProgram({
				appId: item.appid,
				path: item.path,
				success: function (res) {},
				fail: function (err) {
					console.log(err);
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.navbar {
	padding-top: var(--status-bar-height);
	display: flex;
	justify-content: center;
	align-items: center;
	background: #fff;

	.center {
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		font-size: 32rpx;
		font-weight: bold;
		width: 400rpx;
	}
}
.header {
	background-color: white;
	border-radius: 0 0 30rpx 30rpx;
	box-shadow: 0px 10rpx 20rpx lightgray;
	padding: 30rpx;
}
.header .title {
	font-size: 48rpx;
	font-weight: bold;
	margin-top: 20rpx;
}
.header .desc {
	font-size: 28rpx;
	color: dimgray;
	margin-top: 20rpx;
}
.list-bar .item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 30rpx;
	background-color: white;
	margin: 30rpx;
	border-radius: 30rpx;
	box-shadow: 0px 1rpx 20rpx lightgray;
}
.list-bar .item .item-left {
	display: flex;
	align-items: center;
	gap: 20rpx;
}
.list-bar .item .item-left .icon {
	background-color: wheat;
	width: 120rpx;
	height: 120rpx;
	border-radius: 50%;
	overflow: hidden;
	flex-shrink: 0;
}
.list-bar .item .item-left .icon image {
	width: 120rpx;
	height: 120rpx;
}
.list-bar .item .item-left .name {
	font-weight: bold;
	font-size: 32rpx;
	margin-bottom: 20rpx;
}
.list-bar .item .item-left .desc {
	font-size: 24rpx;
	color: gray;
}
</style>
